<template>
  <tm-app ref="app">
    <!-- #ifndef H5 -->
    <tm-navbar :title="data.queryItem.title"></tm-navbar>
    <!-- #endif -->
    <tm-tabs
      :list="departmentTypeList"
      align="around"
      :default-name="data.tabActive"
      :active-name="data.tabActive"
      activeColor="primary"
      activeFontColor="primary"
      _class="text-weight-b"
      itemModel="line"
      :showTabsLineAni="true"
      :width="750"
      @change="tabChanged"
    >
    </tm-tabs>
    <tm-sheet :margin="[0]" v-if="data.isLoading" class="flex1">
      <tm-skeleton-line :height="50"></tm-skeleton-line>
      <tm-skeleton-line :height="50"></tm-skeleton-line>
      <tm-skeleton-line :height="50"></tm-skeleton-line>
      <tm-skeleton-line :height="50"></tm-skeleton-line>
      <tm-skeleton-line :height="50"></tm-skeleton-line>
      <tm-skeleton-line :height="50"></tm-skeleton-line>
    </tm-sheet>
    <tm-scrolly class="from-content" v-else :_style="'height:100%'">
      <personList
        :setList="data.listInfo"
        v-if="data.listInfo.length > 0"
        @btnClick="goMenu"
      ></personList>
      <tm-sheet v-else :margin="[0]">
        <tm-result :showBtn="false" subTitle=" " title="暂无数据"></tm-result>
      </tm-sheet>
    </tm-scrolly>
    <!-- <view class="flex flex-row to-bottom" v-if="data.tabActive === 'members'"> -->
    <!-- <view class="flex-1 mr16">
        <tm-button
          form-type="submit"
          icon="tmicon-plus"
          label="添加好友"
          color="#366EF4"
          @click="menuClick"
          block
        ></tm-button>
      </view>
      <view class="flex-1 mr16">
        <tm-button
          form-type="submit"
          icon="tmicon-plus"
          label="添加权限"
          color="#DCDCDC"
          fontColor="#15181D"
          outlined
          block
        ></tm-button>
      </view> -->
    <!-- <view class="flex-1">
        <tm-button
          form-type="submit"
          icon="tmicon-ellipsis-vertical"
          label=""
          outlined
          fontColor="#15181D"
          color="#DCDCDC"
          block
        ></tm-button>
      </view> -->
    <!-- </view> -->
  </tm-app>
  <formModal
    :show="show"
    :className="'center'"
    @close="close"
    :menuInfo="menuInfo!"
  />
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'
import { reactive, ref } from 'vue'
import * as config from '../../relation/config/menuOperate'
import personList from '../../relation/components/personList.vue'
import { departmentTypeList } from '../../relation/config/config'
import { InfoPortal } from '@/pages/home/common/portalType'
import formModal from '../../../components/customModal/formModal.vue'
import relation from '../../relation/common/relation'

const data = reactive<any>({
  listInfo: [],
  memberLength: 0,
  tabActive: 'members',
  isLoading: true,
  mainData: '',
  queryItem: ''
})
let show = ref<boolean>(false)
let menuInfo = ref<InfoPortal>()
onLoad(async query => {
  if (query && query.item) {
    let item = JSON.parse(query.item)
    data.queryItem = item
    let res = await config.loadDepartmentsMenu(item)
    data.mainData = res
    getMenuList(res)
  }
})
const menuClick = () => {
  menuInfo.value = relation.getSingleMode()
  openModal()
}
/** 打开弹窗 */
const openModal = () => {
  show.value = true
}

const close = () => {
  show.value = false
}
async function getMenuList(obj: any) {
  uni.showLoading({
    title: '加载中...'
  })
  let arr: {
    label: any
    itemType: any
    icon: any
    remark: any
    isShow: boolean
    key: any
    code: any
    createTime: any
    updateTime: any
  }[] = []
  if (data.tabActive === 'members') {
    obj.item.target?.members?.forEach(element => {
      let icon: any = null
      try {
        icon = JSON.parse(element.icon)
      } catch {
        icon = ''
      }
      let obj = {
        label: element.name,
        itemType: element.typeName,
        icon: icon.thumbnail,
        remark: element.remark,
        isShow: false,
        key: element.key,
        code: element.code,
        createTime: element.createTime,
        updateTime: element.updateTime
      }
      arr.push(obj)
    })
    data.listInfo = arr
  } else {
    obj.children?.forEach(element => {
      let obj = {
        label: element.label,
        itemType: element.item.target.metadata.typeName,
        icon: element?.item?.share?.avatar?.thumbnail,
        remark: element.remark,
        isShow: true,
        key: element.key
      }
      arr.push(obj)
    })
    data.listInfo = arr.filter(item => {
      return item.itemType.includes(data.queryItem.label)
    })
  }
  setTimeout(() => {
    uni.hideLoading()
    data.isLoading = false
  }, 500)
}

function tabChanged(key: string) {
  data.tabActive = key
  getMenuList(data.mainData)
}
async function goMenu(item: {
  key: any
  label: any
  type: any
  mainKey: any
  itemType: any
  code: any
  createTime: any
  updateTime: any
  remark: any
}) {
  const params = {
    title: item.label,
    itemType: item.itemType,
    key: item.key,
    companyKey: data.mainData.key
  }
  if (data.tabActive === 'department') {
    uni.navigateTo({
      url: '/pages/relation-pages/group/departList?item=' + JSON.stringify(params)
    })
  } else {
    const jsons = {
      name: item.label,
      typeName: item.itemType,
      code: item.code,
      createTime: item.createTime,
      updateTime: item.updateTime,
      remark: item.remark
    }
    uni.navigateTo({
      url: '/pages/relation-pages/menuDetail?item=' + JSON.stringify(jsons)
    })
  }
}
</script>

<style lang="scss">
.from-content {
  height: calc(100vh - 10px);
  overflow-y: scroll;
}
.to-bottom {
  padding: 0px 10px;
  background-color: #fff;
  height: 80px;
  display: flex;
  align-items: center;
}
.mr16 {
  margin-right: 16px;
}
.flex1 {
  flex: 1;
}
</style>
